<template>
  <div>
    <div class="orderShop">  
      <div class="orderShopImg"><img :src="shopItem.product.thumb" ></div>
      <div class="shopTxt">
        <div class="shopName">{{shopItem.product.name}}</div>
        <div class="shopNorms">规格：{{shopItem.product.format.name}}</div>
        <div class="moneyNum">
          <div class="shopMoney">￥{{shopItem.product.format.price}}</div>
          <div class="shopNum">X{{shopItem.quantity}}</div>
        </div>
      </div>
    </div> 
    <div class="totalprice">
      <div>共{{shopItem.quantity}}件商品合计:
      <span class="totalpriceSpan">￥{{orderShopItemList.isMyselfPick?orderShopItemList.initPrice:(orderShopItemList.initPrice+8)}}</span>
      (含运费￥{{orderShopItemList.isMyselfPick?0:8.00}})
      </div> 
    </div> 
  </div> 
</template>
<script>
export default {
    props:{
      shopItem:{
        type: Object
      },
      orderShopItemList:{
        type: Object
      },
    },
    methods:{
    
    }
  }
</script>
<style scoped>
.orderShop{
  background: #fafafa;
  padding: 20rpx 24rpx;
  display: flex;
}
.orderShop .orderShopImg {
  width:180rpx;
  height:180rpx;
  margin-right: 28rpx;
}
.orderShop .orderShopImg img{
  width:180rpx;
  height:180rpx;
  display: block;
}
.orderShop .shopTxt{
  flex: 1;
  overflow: hidden;
  position: relative;
  line-height: 40rpx;
}
.orderShop .shopTxt .shopName{
  font-size:28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 15rpx;
}
.orderShop .shopTxt .shopNorms{
  font-size:28rpx;
  color:darkgray;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 15rpx;
}
.orderShop .shopTxt .moneyNum{
  display: flex;
  position: absolute;
  bottom: 15rpx;
  width: 100%;
}
.orderShop .shopTxt .moneyNum .shopMoney{
  flex: 1;
  font-size:28rpx;
  color:#E38B8B;
}
.orderShop .shopTxt .moneyNum .shopNum{
  font-size:28rpx;
  width:51rpx;  
}
.totalprice{
  padding: 0 24rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size:26rpx;
  color:#2a2a2a;
}
.totalprice span{
  font-size:30rpx;
  color:#e38a8a;
}
</style>


